<template>
  <div>
    <div class="cards">
      <Card style="width: 520px" class="card-item">
        <Form ref="mineForm" :model="mineForm" label-position="left" :label-width="100">
          <FormItem label="用户名">
            <Input v-model="mineForm.username"></Input>
          </FormItem>
          <FormItem label="密码">
            <Input v-model="mineForm.password"></Input>
          </FormItem>
          <FormItem label="手机号">
            <Input v-model="mineForm.phone"></Input>
          </FormItem>
        </Form>
        <Button @click="submit" type="primary">修改信息</Button>
        <Button @click="logout">退出登录</Button>
      </Card>
    </div>
  </div>
</template>
<script>
import { amendUserInfo, getUserInfo } from '../api/index'
export default {
  data() {
    return {
      mineForm: {}
    }
  },
  methods: {
    submit() {
      const userInfo = JSON.parse(localStorage.getItem('userInfo') || {})
      const { id } = userInfo
      amendUserInfo(id, this.mineForm).then(() => {
        this.$Message.success('修改成功~')
        getUserInfo({id}).then((res) => {
          localStorage.setItem('userInfo', JSON.stringify(res[0]))
        })
      })
    },
    logout(){
        this.$router.replace('/')
        // 清除本地缓存
        localStorage.removeItem('userInfo')
      }
  },
  mounted() {
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || {})
    // console.log(userInfo)
    this.mineForm = userInfo
  }
}
</script>

<style scoped lang="scss">
img {
  width: 200px;
}
.cards {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .card-item {
    position: relative;
    span {
      position: absolute;
      color: rgb(35, 35, 31);
      font-weight: bold;
      left: 20px;
    }
  }
  .sTime,
  .eTime {
    display: flex;
  }
}
.btns {
  display: flex;
  justify-content: flex-end;
  button {
    margin: 0 5px;
    margin-top: 10px;
  }
}
</style>
